<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    请选择省份：
    <select name="" id="provence">
        <option value="">请选择</option>
        <option value="0">浙江省</option>
        <option value="1">湖北省</option>
        <option value="2">广东省</option>
    </select>

    <select name="" id="city">

    </select>



    <script>
        /* 
            需求：
                1.选择对应的省份的时候，输出该option标签的value值
                1.根据选择的省份选择对应的城市

         */
        /* 
           准备基础数据：
               浙江省[0]
               湖北省[1]
               广东省[2]
         */
        const zjCity = ['杭州', '温州']
        const hbCity = ['湖北', '荆州', '黄石']
        const gdCity = ['深圳', '惠州', '中山', '东莞']


        // 将数据放入二维数组
        const initCityData = [
            ['杭州', '温州'],
            ['湖北', '荆州', '黄石'],
            ['深圳', '惠州', '中山', '东莞']
        ]

        const selectObj = document.querySelector("#provence")
        const cityObj = document.querySelector("#city")
  
        console.dir(selectObj);
        const options = selectObj.options;


        selectObj.addEventListener("change", function () {

            //根据选择不同的省份获得对应的城市
            const provinceValue = options[selectObj.selectedIndex].value   //获取选择城市的 value

            //初始化
            cityObj.innerHTML = initCityData[provinceValue]

            

            // console.log(provinceValue)
            //待会要便利的数据
            // console.log(initCityData[provinceValue])

            let optionCitys = ''
            //遍历城市信息
            for(const item of initCityData[provinceValue]){
                //在做该操作之前应该先把显示城市的 select 标签中的option标签清空
                
                // console.log(item)
                //创建option标签  方式1
                // const optionObj = document.createElement("option")
                // optionObj.text = item;
                // cityObj.appendChild(optionObj)

                //创建option标签方式2   使用innerHTML ，有替换效果
               optionCitys += '<option value="">'+item+'</option>'
            }
            cityObj.innerHTML = optionCitys

        })
    </script>
</body>

</html>